<script setup>
import { ref, watch, defineProps, defineEmits } from "vue";
import { ElMessage } from "element-plus";
const prop = defineProps({
  visitedfeatureSelect: Boolean,
  columnData: Array,
});

const emit = defineEmits(["closeSelect","getSelectResult"]);
// console.log(prop.visitedfeatureSelect);
let viewDialogFormVisible = ref(prop.visitedfeatureSelect);

const closeViewDialogFormVisible = () => {
  emit("closeSelect");
  viewDialogFormVisible.value = false;
  tableData.value = [];
};
// 表格数据
let tableData = ref([]);
watch(
  () => prop.visitedfeatureSelect,
  (newValue) => {
    viewDialogFormVisible.value = newValue;
    // console.log('传过来的数据',newValue)
    prop.columnData.forEach((item) => {
      let tem = {
        column: item,
      };
      tableData.value.push(tem);
    });
    // console.log('shujushuju',tableData.value)
  }
);
// watch(tableData,(newvalue)=>{
//   console.log('监听tableData',newvalue)

// })
// 选择事件
let SelectChemicalFormula = ref([]);
let SelectFeatures = ref([]);
let SelectTarget = ref([]);
const tableChemicalFormula = ref("");
const handleSelectChemicalFormula = (selection) => {
  if (SelectChemicalFormula.value.length > 0) {
    ElMessage({
      message: "化学式只允许选择一项！",
      type: "warning",
    });
    tableChemicalFormula.value.clearSelection();
    SelectChemicalFormula.value = ref([]);
    return;
  } else {
    SelectChemicalFormula.value = [selection[0].column];
    // console.log(SelectChemicalFormula.value);
  }
};
const selectAll = () => {
  ElMessage({
    message: "化学式只允许选择一项！",
    type: "warning",
  });
  tableChemicalFormula.value.clearSelection();
  SelectChemicalFormula.value = ref([]);
  return;
};

const handleSelectFeatures = (selection) => {
  let temArr = []
  selection.forEach((obj)=>{
    temArr.push(obj.column)
  })
  SelectFeatures.value = temArr;
  // console.log(temArr)
  // SelectFeatures.value.forEach((obj)=>{
  //   if (obj.column === )

  // })
};
const handleSelecttarget = (selection) => {
  let temArr = []
  selection.forEach((obj)=>{
    temArr.push(obj.column)
  })
  SelectTarget.value = temArr;
};

let defineResult = ref([]);
const submitUpload = () => {
  if (
    SelectChemicalFormula.value.length < 1 ||
    SelectFeatures.value.length < 1 ||
    SelectTarget.value.length<1
  ) {
    ElMessage({
      message: "三种变量每个至少选择一项！",
      type: "warning",
    });
    return;
  } else {
    defineResult.value = [
      {
        selectChemicalFormula: SelectChemicalFormula.value,
        selectFeatures: SelectFeatures.value,
        selectTarget:SelectTarget.value
      },
    ];
    emit('getSelectResult',defineResult.value)
    closeViewDialogFormVisible()
  }
};
</script>
<template>
  <div class="dialog-Wrap">
    <el-dialog
      v-model="viewDialogFormVisible"
      title="声明特征和标签"
      @close="closeViewDialogFormVisible"
    >
      <el-tabs class="el-tabs">
        <el-tab-pane label="化学式选择">
          <el-table
            class="table-chemicalFormula"
            ref="tableChemicalFormula"
            :data="tableData"
            height="250"
            style="width: 300px"
            @select="handleSelectChemicalFormula"
            @select-all="selectAll"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="column" label="化学式" width="280" />
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="特征输入选择">
          <el-table
            class="table-features"
            :data="tableData"
            height="250"
            style="width: 300px"
            @select="handleSelectFeatures"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="column" label="特征" width="280" />
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="标签输出选择">
          <el-table
            class="table-target"
            :data="tableData"
            height="250"
            style="width: 300px"
            @select="handleSelecttarget"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="column" label="标签" width="280" />
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <span class="dialog-footer">
          <el-button class="btn-upload" type="success" @click="submitUpload">
            提交
          </el-button>
          <el-button @click="closeViewDialogFormVisible">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="less" scoped>
.project-name {
  width: 300px;
  height: 30px;
  margin: 0 5px;
}
.btn-upload {
  margin-left: 5px;
}
.label {
  margin-top: 5px;
}
</style>
